<html>
<head>
<title>Remake de Fruity Frank - Version 0.22</title>
<style type="text/css">
span {
	font-family: 'Courier New';
	font-size: 10pt;
	color: #000000;
}
.SpanClass0 {
	color: #808080;
}
.SpanClass3 {
	color: #008080;
}
.SpanClass5 {
	font-weight: bold;
	color: #0000FF;
}
.SpanClass7 {
	color: #808080;
}
.SpanClass10 {
	font-weight: bold;
	color: #000080;
}
.SpanClass11 {
}
</style>
</head>
<body bgcolor="#FFFFFF">
<h2>Remake (parcial) de Fruity Frank... 22 - Redise&ntilde;ando usando clases (3 - Personajes animados)</h2>
<p align="right">(Volver al <a href="doc.html">&iacute;ndice</a>) </p>



<p>Todav&iacute;a queda una cosa por hacer para que el juego redise&ntilde;ado usando clases tenga las mismas funcionalidades que la versi&oacute;n anterior: personajes animados.</p>

<p>Hab&iacute;amos comentado que lo ideal ser&iacute;a que la clase &quot;ElementoGr&aacute;fico&quot; nos permitiera tanto manejar elementos con una &uacute;nica imagen est&aacute;tica como elementos que tengan varias im&aacute;genes, que actuar&iacute;an como distintos fotogramas para dar una sensaci&oacute;n de movimiento m&aacute;s real. Incluso ser&iacute;a deseable que pidi&eacute;ramos tener distintas secuencias de im&aacute;genes seg&uacute;n el sentido en que se muestra el personaje (izquierda, derecha, arriba o abajo).</p>

<p>Tampoco es especialmente dif&iacute;cil. Vamos con ello...</p>


<ul>
  <li>Por una parte, ahora tendremos un array de im&aacute;genes dentro de la clase ElemGrafico. Nos interesar&aacute; no declarar el array como &quot;Imagen[,]&quot;, sino como &quot;Imagen[][]&quot;, para permitir que haya distinto n&uacute;mero de fotogramas en un sentido o en otro:</li>
</ul>

<pre><code>    // La secuencia de imagenes, si es animada
    protected Imagen[][] secuencia;</code></pre>   

<ul>      
  <li>Necesitaremos variables para saber en qu&eacute; direcci&oacute;n nos encontramos, y en qu&eacute; n&uacute;mero de fotograma. Para que el fuente sea m&aacute;s legible, podemos crear variables (o incluso constantes) llamadas ARRIBA, ABAJO, etc.</li>
</ul>
  
<pre><code>    protected byte fotogramaActual;
    protected byte direccion;
    public const byte ABAJO = 0;
    public const byte ARRIBA = 1;
    public const byte DERECHA = 2;
    public const byte IZQUIERDA = 3;</code></pre>  

<ul>      
  <li>Ahora la rutina de Dibujar deber&aacute; mostrar una imagen est&aacute;tica o una imagen animada, seg&uacute;n lo que hayamos cargado:</li>
</ul>

<pre><code>    public  void Dibujar()
    {
      if (contieneSecuencia)
        secuencia[direccion][fotogramaActual].Dibujar(x, y);
      else if (contieneImagen)
        miImagen.Dibujar(x, y);
      else
        Hardware.ErrorFatal(&quot;Se ha intentado dibujar una imagen no cargada!&quot;);
    }</code></pre>  

<ul>      
  <li>Donde la variable &quot;contieneSecuencia&quot; se declara con valor &quot;false&quot; en el constructor, y recibe el valor &quot;true&quot; cuando cargamos.</li>
</ul>

<pre><code>    public  ElemGrafico()
    {
      contieneImagen = false;
      contieneSecuencia = false;
      direccion = ABAJO;
      fotogramaActual = 0;
      secuencia = new Imagen[4][];
    }</code></pre>  

<ul>
  <li>Cuando cargamos, recibiremos un &quot;array&quot; de nombres de im&aacute;genes. Deberemos reservar espacio para todas ellas, y cargarlas una por una:</li>
</ul>  

<pre><code>    public void CargarSecuencia(byte direcc, string[] nombres)
    {
      contieneImagen = true;
      contieneSecuencia = true;
      byte tamanyo = (byte) nombres.Length;
      secuencia[direcc] = new Imagen[tamanyo];
      for (byte i=0; i&lt; nombres.Length; i++) {
        secuencia[direcc][i] = new Imagen(nombres[i]);
        }
    }</code></pre>  


<ul>      
  <li>Cuando cambiemos de direcci&oacute;n, deberemos volver al fotograma n&uacute;mero 0, por si acaso en una direcci&oacute;n hubiera m&aacute;s fotogramas que en otra. Si la direcci&oacute;n que nos piden es en la que ya estamos, no deber&iacute;a hacer falta volver al fotograma 0:</li>
</ul>

<pre><code>    public  void CambiarDireccion(byte nuevaDir)
    {
      if (direccion != nuevaDir)
      {
        direccion = nuevaDir;
        fotogramaActual = 0;
      }
    } </code></pre>  

<ul>
  <li>En el personaje, cambiar&aacute; el constructor, que ahora no carga una imagen sino una secuencia:</li>
</ul>

<pre><code>    public  Personaje(Juego j)  // Constructor
    {    
      miJuego = j;
      ...
      CargarSecuencia( ARRIBA, 
        new string[] {"imagenes/personajea1.png",
          "imagenes/personajea2.png"} );
      CargarSecuencia( DERECHA, 
        new string[] {"imagenes/personajed1.png",
          "imagenes/personajed2.png"} );
      ...    
    }
</code></pre>  

<ul>      
  <li>Adem&aacute;s, debemos decidir cuando queremos que cambie la apariencia del personaje. Podr&iacute;a ser en cada fotograma del juego, y entonces incluir&iacute;amos &quot;miPersonaje.SiguienteFotograma&quot; dentro del m&eacute;todo &quot;SiguienteFotograma&quot; de Juego, pero en el Fruity Frank original, el personaje s&oacute;lo cambia de forma cuando se mueve, as&iacute; que lo haremos dentro de &quot;MoverDerecha&quot; y los m&eacute;todos similares:</li>
</ul>

<pre><code>    public  void MoverDerecha()
    {
      if (miJuego.GetNivelActual().EsPosibleMover( (short) (x+incrX), y) ) 
      {
        CambiarDireccion(DERECHA);
        SiguienteFotograma();
        x += incrX;
        miJuego.GetMarcador().IncrPuntuacion( 
          miJuego.GetNivelActual().PuntosMover( x, y ));
      }
    }</code></pre>  

    
<ul>      
  <li>Con eso ya hemos igualado casi todas las funcionalidades de la versi&oacute;n &quot;no orientada a objetos&quot;, excepto el disparo. Pronto volveremos a incorporarlo, pero ahora ser&aacute; un disparo un poco m&aacute;s &quot;real&quot;, en vez de moverse siempre hacia la derecha, haya obst&aacute;culos o no los haya.</li>
</ul>

<p>Si quieres ver el fuente completo, todo el fuente del proyecto est&aacute; en: <a href="http://code.google.com/p/fruityfrank"> code.google.com/p/fruityfrank</a></p>
<p align="right">(Volver al <a href="doc.html">&iacute;ndice</a>) </p>
</body>
</html>
